<@override name="content">
<div id="app">
<div class="login-container">
    <el-form ref="loginFromRef" class="login-form" :model="loginForm">
        <div class="title-container">
            <h3 class="title">scrm后台系统</h3>
        </div>

        <el-form-item prop="username">
            <el-input
                    v-model="loginForm.username" placeholder="请输入用户名" name="username" type="text"
                    @keyup.enter.native="handleLogin"
                    prefix-icon="el-icon-user-solid"
            />
        </el-form-item>
        <el-form-item prop="password">
            <el-input
                    v-model="loginForm.password" placeholder="请输入密码" name="password" type="password"
                    @keyup.enter.native="handleLogin"
                    prefix-icon="el-icon-lock"

            />
        </el-form-item>

        <el-form-item class="code-box" prop="captcha_code">
            <el-input
                    v-model="loginForm.identiryCode" placeholder="图形验证码" name="identiryCode" class="code-input"
                    maxlength="4" @keyup.enter.native="handleLogin"
                    prefix-icon="el-icon-lock"
            >
            </el-input>
            <img @click="reloadIdCode"
                 :src="codeImg"
                 class="code-img">
        </el-form-item>

        <el-button
                type="primary" style=" margin-bottom: 30px;width: 100%;" :loading="loading"
                size="large" @click.native.prevent="handleLogin">
            <span>{{!loading ? '登 录' : '登 录 中...'}}</span>
        </el-button>
    </el-form>

</div>
</div>
<script src="/res/js/page/authLogin.js"></script>
<style scoped>
    .login-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
    }

    .login-form {
        overflow: hidden;
        position: relative;
        margin: 0 auto;
        margin-top: 3%;
        padding: 35px;
        width: 420px;
        max-width: 100%;
        background: white;

    }


    .title-container {
        position: relative;
    }

    .title {
        margin: 0 auto 40px;
        text-align: center;
        font-weight: bold;
        font-size: 26px;
        color: $txt_color;
    }

    .code-box {
        position: relative;

    }

    .code-img {
        position: absolute;
        right: 0;
        width: 100px;
        background: transparent;
        height: 40px;
        border-radius: 0 5px 5px 0;
    }
</style>
</@override>

<!-- extends 一定要写在页面最下方 -->
<@extends name="_base.html"/>